<script setup lang='ts'>
       import { ref } from 'vue'
       enum SizeEnum{
        S = "s",
        M = "m",
        L = "l",
        XL = "xl",
        XXL = "xxl",
        XXXL = "xxxl"
       }

       const showAvatar = ref(true)

       // 定义一个变量 尺寸的变量
       const sizeData = ref<SizeEnum>(SizeEnum.L)
       const changeSize = ()=>{
        if(sizeData.value === SizeEnum.S){
            sizeData.value = SizeEnum.M
        }else if(sizeData.value === SizeEnum.M){
            sizeData.value = SizeEnum.L
        }else if(sizeData.value === SizeEnum.L){
            sizeData.value = SizeEnum.XL
        }else if(sizeData.value === SizeEnum.XL){
            sizeData.value = SizeEnum.XXL
        }else if(sizeData.value === SizeEnum.XXL){
            sizeData.value = SizeEnum.XXXL
        }
       }
</script>
       
       
<template>
       <div class="container">
    <h1>测试条件渲染-v-show</h1>
    <!-- <img
      v-show="showAvatar"
      class="avatar"
      src="https://img2.baidu.com/it/u=6183387,1958309347&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
      alt=""
    /> -->
    <img
      v-if="showAvatar"
      class="avatar"
      src="https://img2.baidu.com/it/u=6183387,1958309347&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
      alt=""
    />
    <button @click="showAvatar = !showAvatar">显示/隐藏</button>
    <p>
        <h1>v-if和v-else-if和v-else</h1>
    </p>
    <p>
        <h2 v-if="sizeData === SizeEnum.S">小孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.M">大孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.L">青年的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XL">正常的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XXL">微胖的尺码</h2>
        <h2 v-else>老高的尺码</h2>
    </p>
    <p>
        <button @click="changeSize">改变尺寸</button>
    </p>

  </div>
</template>
       
       
<style scoped>
    .avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
    .container {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}
/* display: block inline-block inline 行内元素 flex */
</style>